<template>
  <template v-if="modelValue.group === 'layout'">
    <VueDraggable class="layout-box" v-model="modelValue.formItemList" group="people"
      :class="modelValue.formItemList.length > 0 ? '' : 'placeholder-box'">
      <template v-for="(item, index) in modelValue.formItemList">
        <FormItemNested v-model="modelValue.formItemList[index]" :isSelectedControl="isSelectedControl"
          @copyControl="copyControlGroup" @deleteControl="deleteControlGroup" @clickControl="clickControlGroup" />
      </template>
    </VueDraggable>
  </template>
  <template v-else>
    <FormControl :isLayout="false" :isSelected="isSelected" @copyControl="copyControl" @deleteControl="deleteControl"
      @click.stop="clickControl">
      <FormItem class="custom-item" :field="modelValue" :key="modelValue.id" :data="{}" />
    </FormControl>
  </template>
</template>

<script setup lang="ts">
import { VueDraggable, DraggableEvent } from "vue-draggable-plus";
import { FormGroup, FormField } from '../..';

defineOptions({ name: 'FormItemNested' });

const modelValue = defineModel<FormField>();

const isSelectedControl = defineModel<FormGroup>('isSelectedControl');

const isSelected = computed(() => {
  return isSelectedControl.value.id === modelValue.value.id;
})

const emits = defineEmits(["copyControl", "copyControlGroup", "deleteControl", "clickControl", "clickControlNested", "clickControlGroup"]);
const clickControl = () => {
  emits("clickControl", modelValue.value);
}

const clickControlGroup = (field: FormGroup) => {
  emits("clickControlGroup", field);
}

const copyControl = () => {
  emits("copyControl", modelValue.value);
};

const copyControlGroup = (field: FormGroup) => {
  emits("copyControlGroup", field);
}

const deleteControl = () => {
  emits("deleteControl", modelValue.value);
};

const deleteControlGroup = (field: FormGroup) => {
  modelValue.value.formItemList = modelValue.value.formItemList?.filter(x => x.id != field.id);
}

</script>

<style lang="scss" scoped>
.custom-item {
  margin-top: 10px;
  margin-bottom: 10px;
}

.layout-box {
  box-sizing: border-box;
  min-height: 52px;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #a8abb2;
}

.placeholder-box {
  position: relative;
  border: 1px dashed #dcdfe6;

  &::before {
    content: '控件位置';
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
